<template>
	<div class="bg-white">
		<t-form class="pt-8 pl-8 pr-8" :data="formData" @submit="onSubmit" :rules="rules" :requiredMark="false" @reset="onReset" ref="form">
			<t-form-item name="idea_text">
				<t-textarea v-model="formData.idea_text" placeholder="在此处写下你的想法和对系统的建议吧"></t-textarea>
			</t-form-item>
			<div class="flex">
				<t-button theme="default" variant="base" type="reset" class="ml-auto">重置</t-button>
				<t-button class="ml-4" type="submit">立即发布</t-button>
			</div>
		</t-form>
		<t-divider></t-divider>
		<div v-for="(item, index) in ideaData.slice((current - 1)*pageSize, current*pageSize)" :key="index">
			<div class="pl-8 pr-8">
				<p class="text-gray-400 text-xs">{{item.idea_creator_name}}</p>
				<p class="mt-2 mb-4" style="white-space: pre-wrap;">{{item.idea_text}}</p>
				<div class="flex justify-between items-center">
					<p class="text-gray-400">{{item.idea_creation_date.replace(/-/g,".")}}</p>
					<div class="flex items-center cursor-pointer hover:text-blue-500" :style="agreeIdeaStyle(item)" @click="agree(item)">
						<icon name="thumb-down" style="transform: rotateX(180deg);" size="large"></icon>
						<p class="ml-2">{{item.idea_agree_person_ids.length}}</p>
					</div>
				</div>
			</div>
			<t-divider></t-divider>
		</div>
		<div class="p-8">
			<t-pagination v-model="current" :total="ideaData.length" :page-size.sync="pageSize" show-jumper/>
		</div>
	</div>
</template>

<script>
	import { Icon } from 'tdesign-icons-vue'
	import { getUserId } from '@/unit/auth'
	import dayjs from 'dayjs'
	
	export default {
		name: 'Message',
		components: {
			Icon
		},
		data(){
			return{
				formData: {
					idea_text: '',
					idea_creator_id: getUserId(),
					idea_creation_date: dayjs().format('YYYY-MM-DD')
				},
				rules: {
					idea_text: [{required: true, message: '信息不能为空', type: 'error',}]
				},
				ideaData: [],
				agreeIdea: {
					idea_log_id: '',
					idea_agree_person_id: getUserId(),
					idea_agree_date: dayjs().format('YYYY-MM-DD')
				},
				pageSize: 5,
				current: 1,
			}
		},
		methods: {
			// 分页改变时返回顶部
			// changePage(){
			// 	if(!document.querySelector('#body')) return
			// 	window.location.hash = "#body"
			// },
			// 点赞
			agree(item){
				this.agreeIdea.idea_log_id = item.idea_log_id
				this.$store.dispatch('suggestion/agreeIdea', this.agreeIdea).then(res => {
					if(res.status === 0){
						this.$message.success(res.message)
						this.getIdea()
					} else {
						this.$message.warning(res.message)
						this.getIdea()
					}
				})
			},
			// 点赞样式
			agreeIdeaStyle(item){
				for(let i = 0 ; i < item.idea_agree_person_ids.length ; i++){
					if(item.idea_agree_person_ids[i] == getUserId()){
						return 'color: #0052d9'
					}
				}
				return ''
			},
			// 获取留言列表
			getIdea(){
				this.$store.dispatch('suggestion/getIdea').then(res => {
					if(res.status === 0){
						this.ideaData = res.data
					}
				})
			},
			// 重置
			onReset() {
				// this.$message.success('重置成功');
			},
			// 提交
			onSubmit({ validateResult, firstError }){
				 if (validateResult === true) {
					 this.$store.dispatch('suggestion/addIdea', this.formData).then(res => {
						 if(res.status === 0){
							this.$refs.form.reset({ fields: ['idea_text'] });
							this.$message.success(res.message)
							this.getIdea()
						 } else {
							 this.$message.error(res.message)
						 }
					 })
				} else {
					this.$message.warning(firstError);
				}
			}
		},
		created(){
			this.getIdea()
		}
	}
</script>